<template>
  <div>
    <f-table ref="tableRef" @register="register">
      <template #header-left>
        <el-button type="primary" @click="handleSyncGroup">{{ t('sync') }}</el-button>
        <!-- <el-button @click="handleBatchDelete">{{ t('deleteBatch') }}</el-button> -->
        <!-- <el-button @click="handleExport">{{ t('export') }}</el-button> -->
      </template>
      <template #action="{ row }">
        <el-space wrap>
            <!-- <el-button type="primary" text>{{ t('edit') }}</el-button> -->
            <el-button type="primary" text @click="handleSyncGroupUser(row)">{{ t('opt.sync') }}</el-button>
            <el-button type="primary" text @click="handleViewMember(row)">{{ t('opt.member') }}</el-button>
            <!-- <el-button type="primary" text>{{ t('delete') }}</el-button> -->
        </el-space>
      </template>
    </f-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/user.wechat-group'
import { batchDeleteWechatGroupApi, getWechatGroupListApi, syncChatGroupApi, syncChatGroupUserApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IUserItem>[],
    beforeFetch: (opt) => opt,
    api: async (opt) => (await getWechatGroupListApi(opt)).data
})

/**
* @description 批量删除
*/
async function handleBatchDelete () {
    const selection:IWechatGroupItem[] = methods.getSelectionRows()
    if (selection.length == 0) {
        ElMessage.warning(t('deleteEmptyTips'))
        return
    }
    const ids = selection.map(item => item.id)
    const action = await ElMessageBox.alert(t('deleteBatchTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await batchDeleteWechatGroupApi(ids)

        ElMessage.success(t('deleteSuccess'))
        // 清空选项
        methods.clearSelection()
        // 重新加载数据
        methods.reload()
    }
}

/**
 * @description 导出
 */
async function handleExport () {
    console.log(1)
}

function handleViewMember (row: IWechatGroupItem) {
    router.push({
        path: '/htscrm/user/wechat-member',
        query: {
            id: row.chat_id
        }
    })
}

async function handleSyncGroup () {
    await syncChatGroupApi()
    ElMessage.success('同步成功')
    methods.reload()
}
async function handleSyncGroupUser (row:IWechatGroupItem) {
    await syncChatGroupUserApi({ chat_id: row.chat_id })
    ElMessage.success('同步成功')
    methods.reload()
}
onMounted(() => {
})

</script>

<style lang="scss" scoped>

.avatar {
    width: 50px;
    height: 50px;
}
</style>
